<template>
  <div class="luxury-accommodations">
    <!-- 加载状态 -->
    <div v-if="isLoading" class="luxury-loading-overlay">
      <div class="luxury-spinner">
        <div class="spinner-bar"></div>
        <p>Loading...</p>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="luxury-content-wrapper">
      <!-- 住宿卡片列表 -->
      <div class="hotel-list">
        <div
          v-for="(hotel, index) in hotelList"
          :key="index"
          class="hotel-card"
        >
          <!-- 酒店信息 - 酒店名称提到轮播图上面 -->
          <div class="hotel-info">
            <h3 class="hotel-name">{{ hotel.deptName }}</h3>
          </div>
          <!-- 图片轮播区 -->
          <div class="hotel-gallery">
            <el-carousel
              v-if="Array.isArray(hotel.imgUrl) && hotel.imgUrl.length > 0"
              :autoplay="false"
              indicator-position="outside"
              height="500px"
              class="luxury-carousel luxury-3d-carousel"
              @change="handleCarouselChange"
            >
              <el-carousel-item v-for="(img, idx) in hotel.imgUrl" :key="idx">
                <div class="image-container">
                  <image-preview
                    :src="img"
                    :width="1200"
                    :height="600"
                    class="gallery-image"
                  />
                </div>
              </el-carousel-item>
            </el-carousel>
            <div v-else-if="hotel.imgUrl" class="image-container single-image">
              <image-preview
                :src="hotel.imgUrl"
                :width="1200"
                :height="600"
                class="gallery-image"
              />
            </div>
            <div v-else class="media-placeholder">
              <i class="el-icon-picture-outline"></i>
            </div>
          </div>

          <!-- 酒店信息 - 除名称外的其他信息 -->
          <div class="hotel-info">
            <div class="hotel-meta">
              <div class="meta-item">
                <i class="el-icon-user"></i>
                <span>{{ hotel.leader }}</span>
              </div>
              <div class="meta-item">
                <i class="el-icon-phone"></i>
                <span>{{ hotel.phone }}</span>
              </div>
              <div class="meta-item">
                <i class="el-icon-message"></i>
                <span>{{ hotel.email }}</span>
              </div>
            </div>
            <div class="card-actions">
              <button class="luxury-button" @click="goToDetail(hotel.deptId)">
                <span>查看详情</span>
                <i class="el-icon-arrow-right"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { listHotel } from "@/api/system/hotel";
import ImagePreview from '@/components/ImagePreview';


export default {
  name: "LuxuryHotel",
  components: {
    ImagePreview
  },
  data() {
    return {
      hotelList: [],
      isLoading: false
    };
  },
  created() {
    this.getList();
  },
  methods: {
    goToDetail(deptId) {
      this.$router.push({
        name: 'AccommodationsDetail', // 使用name跳转更可靠
        params: { deptId: deptId }
      });
    },
    async getList() {
      this.isLoading = true;
      try {
        const response = await listHotel();
        this.hotelList = response.data.map(hotel => {
          let imgUrl = hotel.imgUrl;
          try {
            if (typeof imgUrl === 'string' && imgUrl.startsWith('[')) {
              imgUrl = JSON.parse(imgUrl);
            }
          } catch (e) {
            console.error('解析imgUrl失败:', e);
          }
          return { ...hotel, imgUrl };
        });
      } catch (error) {
        console.error('获取酒店列表失败:', error);
        this.$message.error('获取酒店列表失败');
      } finally {
        this.isLoading = false;
      }
    },
    handleCarouselChange() {
      // 轮播切换时的处理函数
    }
  }
};
</script>

<style scoped>
.luxury-accommodations {
  position: relative;
  min-height: 100vh;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  background-color: #faf9f7;
}

/* 加载状态 */
.luxury-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.luxury-spinner {
  text-align: center;
}

.spinner-bar {
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #c0a080, transparent);
  margin: 0 auto 15px;
  position: relative;
  overflow: hidden;
}

.spinner-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 100%;
  background: #c0a080;
  animation: loading 1.5s infinite ease-in-out;
}

@keyframes loading {
  0% { transform: translateX(-30px); }
  100% { transform: translateX(110px); }
}

.luxury-spinner p {
  color: #8c7c68;
  font-size: 0.9rem;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* 内容容器 */
.luxury-content-wrapper {
  max-width: 100%;
  margin: 0 auto;
  padding: 20px 1%;
  position: relative;
}

/* 酒店列表 */
.hotel-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  max-width: 100%;
}

.hotel-card {
  background: #fff;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 20px;
}

/* 图片区域 - 占页面98%宽度 */
.hotel-gallery {
  height: 540px;
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-bottom: 25px;
  border-radius: 8px;
}

.image-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.single-image {
  padding: 0;
}

.gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-placeholder {
  width: 100%;
  height: 100%;
  background: #f5f0ea;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #c0a080;
}

.media-placeholder i {
  font-size: 3rem;
  opacity: 0.3;
}

/* 轮播样式 */
.luxury-carousel {
  width: 100%;
  height: 100%;
  perspective: 1500px;
}

.luxury-3d-carousel .el-carousel__container {
  transform-style: preserve-3d;
}

.luxury-3d-carousel .el-carousel__item {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.6s ease;
  transform: rotateY(0deg) translateZ(-200px);
}

.luxury-3d-carousel .el-carousel__item.is-active {
  opacity: 1;
  transform: rotateY(0deg) translateZ(0px);
}

.luxury-3d-carousel .el-carousel__item.prev {
  opacity: 0.5;
  transform: rotateY(-20deg) translateZ(-150px);
}

.luxury-3d-carousel .el-carousel__item.next {
  opacity: 0.5;
  transform: rotateY(20deg) translateZ(-150px);
}

.luxury-carousel .el-carousel__arrow {
  background-color: rgba(255, 255, 255, 0.7);
  color: #2a2a2a;
  width: 40px;
  height: 40px;
  font-size: 18px;
}

.luxury-carousel .el-carousel__arrow:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

.luxury-carousel .el-carousel__indicators {
  bottom: 20px;
}

.luxury-carousel .el-carousel__indicator button {
  background-color: rgba(255, 255, 255, 0.5);
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.luxury-carousel .el-carousel__indicator.is-active button {
  background-color: #fff;
  width: 12px;
  height: 12px;
}

/* 酒店信息 */
.hotel-info {
  padding: 0;
  text-align: center;
  width: 98%;
}

.hotel-name {
  font-family: "Noto Serif JP", serif;
  font-size: 2.8rem;
  font-weight: 500;
  color: #333;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 20px;
  letter-spacing: 2px;
}

.hotel-name::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: #c0a080;
}

.hotel-meta {
  margin-bottom: 25px;
}

.meta-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  color: #7a7a7a;
  justify-content: center;
  font-size: 1.1rem;
}

.meta-item i {
  margin-right: 10px;
  color: #c0a080;
  font-size: 1.3rem;
  width: 24px;
  text-align: center;
}

.meta-item span {
  font-size: 1.1rem;
}

/* 按钮样式 */
.card-actions {
  border-top: 1px solid #f0eae3;
  padding-top: 20px;
  width: 100%;
}

.luxury-button {
  background: transparent;
  color: #c0a080;
  border: none;
  padding: 0;
  font-size: 1rem;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  margin: 0 auto;
  cursor: pointer;
  transition: all 0.3s ease;
}

.luxury-button i {
  margin-left: 8px;
  transition: transform 0.3s ease;
  font-size: 1.1rem;
}

.luxury-button:hover {
  color: #a08060;
}

.luxury-button:hover i {
  transform: translateX(5px);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .hotel-gallery {
    height: 450px;
  }
}

@media (max-width: 992px) {
  .hotel-gallery {
    height: 400px;
  }
}

@media (max-width: 768px) {
  .hotel-gallery {
    height: 350px;
  }

  .hotel-name {
    font-size: 2.2rem;
  }
}

@media (max-width: 576px) {
  .hotel-gallery {
    height: 300px;
    width: 100%;
  }

  .hotel-info {
    width: 100%;
  }

  .hotel-name {
    font-size: 1.8rem;
  }

  .meta-item,
  .meta-item span {
    font-size: 1rem;
  }
}
</style>
